<template>
	<view class="container">
		<view class="example">
			<!-- :rules="rules" -->
			<!-- <view @click="getCode" style="display: flex; justify-content: flex-end; margin-right: 18rpx">
				<u-icon name="scan" color="#2979ff" size="36" slot="right"></u-icon>
			</view> -->

			<u--form labelPosition="left" :model="userInfo" ref="uForm" labelWidth="100">
				<uni-card margin="17rpx 18rrpx" spacing="0px" padding="10px 20px 10px 20px" class="positionLeft">
					<view class="">
						<u-form-item labelWidth="150" label="头像" prop="avatar" borderBottom ref="item1">
							<image :src="userInfo.avatar" mode="" style="width: 50rpx; height: 50rpx"></image>
							<u-icon @click="chooseImg" slot="right" size="28" name="plus-circle-fill" color="#70C7FF"></u-icon>
						</u-form-item>
						<!-- 	<u-form-item labelWidth="150" v-if="userInfo.enterpriseId" label="企业" prop="enterpriseName" borderBottom ref="item1">
							<u--input disabled disabledColor="#ffffff" v-model="userInfo.enterpriseName" border="none" placeholder="请填写企业名称"></u--input>
						</u-form-item>
						<u-form-item labelWidth="150" v-if="userInfo.enterpriseDeptId" label="部门" prop="enterpriseDeptName" borderBottom ref="item1">
							<u--input disabled disabledColor="#ffffff" v-model="userInfo.enterpriseDeptName" border="none" placeholder="请填写部门名称"></u--input>
						</u-form-item>
						<u-form-item labelWidth="150" v-if="userInfo.factoryId" label="厂区" prop="factoryName" borderBottom ref="item1">
							<u--input disabled disabledColor="#ffffff" v-model="userInfo.factoryName" border="none" placeholder="请填写厂区名称"></u--input>
						</u-form-item> -->
						<u-form-item labelWidth="150" label="昵称" prop="nickName" ref="item1" borderBottom>
							<u--input v-model="userInfo.nickName" border="none" placeholder="请填写昵称"></u--input>
						</u-form-item>
						<u-form-item labelWidth="150" label="手机号码" prop="phonenumber" borderBottom ref="item1">
							<u--input v-model="userInfo.phonenumber" border="none" placeholder="请填写手机号码"></u--input>
						</u-form-item>

						<u-form-item labelWidth="150" label="性别" prop="sex" ref="item1" borderBottom @click="selectSex">
							<u--input disabled disabledColor="#ffffff" v-model="userInfo.sexLabel" border="none" placeholder="请选择性别"></u--input>
							<u-picker @cancel="show = false" @confirm="confirm" :show="show" :columns="columns" keyName="label"></u-picker>
						</u-form-item>
					</view>
				</uni-card>
			</u--form>
			<view class="submitButton" @click="submitButton">提交</view>
		</view>
	</view>
</template>

<script>
import { updateUser, getInfos } from '@/api/system/user';
import upload from '@/utils/upload';
export default {
	data() {
		return {
			show: false,
			columns: [
				[
					{
						label: '男',
						id: '0'
					},
					{
						label: '女',
						id: '1'
					}
				]
			],
			userInfo: {
				userType: '',
				// enterpriseDeptId: '',
				// enterpriseDeptName: '',
				// enterpriseId: '',
				// enterpriseName: '',
				// factoryId: '',
				// factoryName: '',
				nickName: '',
				phonenumber: '',
				avatar: '',
				sexLabel: '',
				sex: '',
				userId: uni.getStorageSync('user_id')
			},
			rules: {
				nickName: [
					{
						required: true,
						message: '真实姓名不能为空',
						trigger: ['change', 'blur']
					}
				],
				phonenumber: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	onLoad() {
		let userId = uni.getStorageSync('user_id');
		getInfos(userId).then((res) => {
			this.userInfo = res.data;
			if (this.userInfo.sex == 0) {
				this.userInfo.sexLabel = '男';
			} else {
				this.userInfo.sexLabel = '女';
			}
		});
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {},
	methods: {
		getCode() {
			const that = this; // 缓存 this
			uni.scanCode({
				success: function (res) {
					const codeData = JSON.parse(res.result);
					that.userInfo = {
						...that.userInfo,
						enterpriseDeptName: codeData.enterpriseDeptName,
						factoryName: codeData.factoryName,
						enterpriseName: codeData.enterpriseName,
						enterpriseDeptId: codeData.enterpriseDeptId,
						factoryId: codeData.factoryId,
						enterpriseId: codeData.enterpriseId
					};
					console.log('After scan:', res.result);
				}
			});
		},
		// 回调参数为包含columnIndex、value、values
		confirm(e) {
			this.userInfo.sexLabel = e.value[0].label;
			this.userInfo.sex = e.value[0].id;
			console.log(e.value);
			this.show = false;
		},
		selectSex() {
			this.show = true;
		},
		async chooseImg() {
			let _this = this;
			uni.chooseImage({
				count: 1, // 默认9，设置成1表示单选
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function (res) {
					const tempFilePaths = res.tempFilePaths;
					// 处理选中的图片，例如上传
					upload({
						filePath: tempFilePaths[0]
					}).then((res) => {
						console.log(res);
						_this.userInfo.avatar = res.url;
					});
				}
			});
		},
		submitButton() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					// if (this.userInfo.enterpriseId) {
					// 	this.userInfo.userType = 2;
					// } else {
					// 	this.userInfo.userType = 1;
					// }
					updateUser(this.userInfo).then((res) => {
						uni.$u.toast('修改成功');
						setTimeout(() => {
							this.$tab.reLaunch('/pages/mine/index');
						}, 2000);
					});
				})
				.catch((errors) => {
					uni.$u.toast('请将信息填写完整');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #fafafa;
	height: 100%;
	overflow: hidden;
}

::v-deep .u-form-item__body__left__content__label {
	color: #000 !important;
}

.positionLeft {
	::v-deep .u-form-item__body__right {
		// margin-left: 60rpx !important;
	}
}

.u-form {
	border-radius: 5px;
}

::v-deep .uni-input-placeholder {
	color: #666 !important;
}

::v-deep .input-placeholder {
	color: #666 !important;
}

::v-deep .uni-card--shadow {
	box-shadow: none !important;
}

::v-deep .uni-card--border {
	border: 1px solid #e5e5e5;
	border-radius: 16rpx;
}
</style>